<template>
    <div class="nav-box">
        <div class="top"></div>
        <div class="bottom">
            <div :class="item.className" v-for="(item,index) in List" :key="index">
                <div :class="item.className_1" v-show="item.className_1">
                    <img :src="item.imgSrc" alt="">
                    <div :class="item.hover_className">
                        <h3>{{ item.title }}</h3>
                        <hr>
                        <p>{{ item.more }}</p>
                    </div>
                </div>
                <div :class="item.className_2" v-show="item.className_2">
                    <img :src="item.imgSrc2" alt="">
                    <div :class="item.hover_className">
                        <h3>{{ item.title2 }}</h3>
                        <hr>
                        <p>{{ item.more }}</p>
                    </div>
                </div>
            </div>
            <!-- <div class="two">
                <div class="two1">
                    <img src="../../assets/fashion1.jpg" alt="">
                    <div class="one1-hover">
                        <h3>红粉密语</h3>
                        <hr>
                        <p>MORE</p>
                    </div>
                </div>
            </div>
            <div class="three">
                <div class="three1">
                    <img src="../../assets/fashion4.jpg" alt="">
                    <div class="one1-hover">
                        <h3>红粉密语</h3>
                        <hr>
                        <p>MORE</p>
                    </div>
                </div>
                <div class="three2">
                    <img src="../../assets/fashion5.jpg" alt="">
                    <div class="one1-hover">
                        <h3>红粉密语</h3>
                        <hr>
                        <p>MORE</p>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                List: [{
                    className: 'one',
                    className_1: 'one1',
                    className_2: 'one2',
                    imgSrc: require('../../assets/fashion2.jpg'),
                    imgSrc2: require('../../assets/fashion3.jpg'),
                    hover_className: 'one1-hover',
                    title: "沈梦辰",
                    title2: "宋祖儿",
                    more: 'MORE',
                },{
                    className: 'two',
                    className_1: 'two1',
                    imgSrc: require('../../assets/fashion1.jpg'),
                    hover_className: 'one1-hover',
                    title: "张碧晨",
                    more: 'MORE',
                },{
                    className: 'three',
                    className_1: 'three1',
                    className_2: 'three2',
                    imgSrc: require('../../assets/fashion4.jpg'),
                    imgSrc2: require('../../assets/fashion5.jpg'),
                    hover_className: 'one1-hover',
                    title: "杨幂",
                    title2: "迪丽热巴",
                    more: 'MORE',
                }]
            }
        }
    }
</script>
<style scoped>
    .top {
        width: 100%;
        height: 198px;
        background: url('../../assets/fashion_bg.jpg') no-repeat center;
        margin-bottom: 50px;
    }
    .bottom  {
        width: 1140px;
        height: 668px;
        margin: 0 auto;
        /* border: 1px solid #000; */
    }

    .one, .two, .three {
        width: 33.3%;
        float: left;
    }
    .one div, .three div, .two div {
        width: 100%;
        height: 334px;
        cursor: pointer;
        overflow: hidden;
    }
    .two div {
        height: 668px;
    }
    .one div img, .three div img {
        width: 100%;
    }
    .two div img {
        width: 100%;
        height: 668px;
    }
    /* 移入效果 */
    .one .one1, .one .one2, .two .two1, .three .three1, .three .three2 {
        position: relative;
    }
    /* .one1:hover, .one2:hover, .two1:hover, .three1:hover, .three2:hover {
        filter: brightness(30%);
    } */
    .one1-hover {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 3;
        background: rgba(0,0,0,0.6);
        display: none;
    }
    .one1:hover .one1-hover, .one2:hover .one1-hover, .two1:hover .one1-hover, .three1:hover .one1-hover, .three2:hover .one1-hover {
        display: block;
    }
    .one1-hover h3 {
        font-size: 26px;
        color: #fff;
        font-weight: normal;
        margin-top: 80px;
    }
    .two1 .one1-hover h3 {
        margin-top: 230px;
    }
    .one1-hover hr {
        width: 100px;
        margin: 0 auto;
        margin-top: 30px;
    }
    .one1-hover p {
        width: 130px;
        height: 40px;
        line-height: 40px;
        border: 1px double #fff;
        color: #fff;
        font-size: 24px;
        margin: 30px auto;
        transition: all 1s;
    }
    .one1-hover p:hover {
        background: #000;
    }
</style>